<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: head(~{ :: title}, ~{ :: link}, ~{ ::script},~{::style})">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>商户管理平台-部门编辑</title>
    <link rel="stylesheet" th:href="@{/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap-select/css/bootstrap-select.min.css}">
    <script th:src="@{/plugins/zTree_v3-master/js/jquery.ztree.all.js}"></script>
    <script th:src="@{/bootstrap/bootstrap-select/js/bootstrap-select.min.js}"></script>
    <script th:src="@{/bootstrap/bootstrap-select/js/i18n/defaults-*.min.js}"></script>
    <style>
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 220px;
            height: 360px;
            overflow-y: scroll;
            overflow-x: auto;
        }
    </style>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var MpsDeptList =/*[[${MpsDeptList}]]*/;
        var ParentId =/*[[${D_I.parent}]]*/;
        var roleArr =/*[[${roleEcho}]]*/;
        /*]]>*/

        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idkey: "id",
                    pIdKey: "parent"
                }
            },
            callback: {
                beforeClick: beforeClick,
                onClick: treeOnClick
            }
        };
        function beforeClick(id, node) {
            return true;
        }
        function treeOnClick(e, id, node) {
            $("#parentSel").val(node.name);
            $("#parent").val(node.id);
            hideTree();
        }
        function onBodyDown(e) {
            if (!(event.target.id == "parentSel" || event.target.id == "ParentTreeContent" || $(event.target).parents("#ParentTreeContent").length > 0)) {
                hideTree();
            }
        }
        function showTree() {
            var parentObj = $("#parentSel");
            var parentOffset = $("#parentSel").offset();
            $("#ParentTreeContent").css({
                left: parentOffset.left + "px",
                top: parentOffset.top + parentObj.outerHeight() + "px"
            }).slideDown("fast");
            $("body").bind("mousedown", onBodyDown);
        }
        function hideTree() {
            $("#ParentTreeContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        $(function () {
            var zNodes = eval("(" + MpsDeptList + ")");
            $.fn.zTree.init($("#ParentTree"), setting, zNodes);
            $("#parentSel").click(function () {
                showTree();
            });
            $.each(zNodes, function (i, n) {
                if (n.id == ParentId) {
                    $("#parentSel").val(n.name);
                }
            });
            var treeObj = $.fn.zTree.getZTreeObj("ParentTree");
            treeObj.expandAll(true);
            //var node = treeObj.getNodeByTId(ParentId);
            $('#roles').selectpicker('val', roleArr);
        });
    </script>
</head>
<body th:replace="layout::body(~{this::section})">
<section class="content-wrapper">
    <section class="content-header">
        <h1>
            部门
            <small>编辑</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 商户管理平台</a></li>
            <li class="active">部门编辑</li>
        </ol>
    </section>
    <section class="content">
        <div th:if="${respMsg != ''}" class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-ban"></i> 操作提示</h4>
            <label th:text="${respMsg}"/>
        </div>
        <form class="form" role="form" method="post" th:action="@{/MpsDept/Update}">
            <input type="hidden" id="id" name="id" th:value="${D_I.id}"/>
            <div class="form-group">
                <label>部门名称：</label>
                <input type="text" id="name" name="name" class="form-control" th:value="${D_I.name}"/>
            </div>
            <div class="form-group">
                <label>上级部门：</label>
                <input type="text" id="parentSel" name="parentSel" class="form-control"/>
                <input type="hidden" id="parent" name="parent" th:value="${D_I.parent}"/>
            </div>
            <div class="form-group">
                <label>部门备注：</label>
                <textarea id="descr" name="descr" class="form-control" th:text="${D_I.descr}"></textarea>
            </div>
            <div class="form-group">
                <label>角 　 色：</label>
                <select id="roles" name="roles" class="selectpicker show-tick form-control" multiple
                        data-live-search="false">
                    <label th:each="item:${MpsRoleList}">
                        <option th:value="${item.id}" th:text="${item.name}"></option>
                    </label>
                </select>
            </div>
            <div class="form-group">
                <label>资料排序：</label>
                <input type="number" id="sort" name="sort" value="99999" class="form-control" th:value="${D_I.sort}"/>
            </div>
            <div class="form-group">
                <label>资料状态：</label>
                <input type="number" id="status" name="status" value="0" class="form-control" th:value="${D_I.status}"/>
            </div>
            <div class="row">
                <div class="col-md-5"></div>
                <div class="col-md-1">
                    <input type="submit" class="btn btn-block btn-primary" value="保存"/>
                </div>
                <div class="col-md-1">
                    <a class="btn btn-block btn-primary" th:href="@{/MpsDept/goMpsDeptList}">返回</a>
                </div>
                <div class="col-md-5"></div>
            </div>
        </form>
        <div id="ParentTreeContent" style="display: none;position: absolute;">
            <ul id="ParentTree" class="ztree" style="margin-top: 0;width: 200px;"></ul>
        </div>
    </section>
</section>
</body>
</html>